<template>
  <div>
    <a-slider v-model:value="size" />
    <a-space :size="size">
      Space
      <a-button type="primary">Button</a-button>
      <a-upload>
        <a-button>
          <UploadOutlined />
          Click to Upload
        </a-button>
      </a-upload>
      <a-popconfirm
        title="Are you sure delete this task?"
        ok-text="Yes"
        cancel-text="No"
      >
        <a-button>Confirm</a-button>
      </a-popconfirm>

    </a-space>
    <hr>
    <a-space direction="vertical">
      <a-card
        title="Card"
        style="width: 300px"
      >
        <p>Card content</p>
        <p>Card content</p>
      </a-card>
      <a-card
        title="Card"
        style="width: 300px"
      >
        <p>Card content</p>
        <p>Card content</p>
      </a-card>
    </a-space>
    <hr>
    <a-space
      align="start"
      wrap
    >
      center
      <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span>
      <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span> <a-button type="primary">Primary</a-button>
      <span class="mock-block">Block</span>
    </a-space>
    <hr>
    <a-space>
      <template #split>
        <a-divider type="vertical" />
      </template>
      <a-typography-link>Link</a-typography-link>
      <a-typography-link>Link</a-typography-link>
      <a-typography-link>Link</a-typography-link>
    </a-space>
    <hr>
    <a-space>
      <a-space-compact block>
        <a-button type="primary">
          555
        </a-button>
        <a-button type="primary">
          666
        </a-button>
      </a-space-compact>
      <a-space-compact direction="vertical">
        <a-button>Button 1</a-button>
        <a-button>Button 2</a-button>
        <a-button>Button 3</a-button>
      </a-space-compact>

    </a-space>

  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      size: 8
    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
